<template>
  <div className="my">
    <NavBar title="订单详情"></NavBar>
    <div class="my__top">
      <div class="my__top-title">
        <span>{{info.order.order_no}}</span>
        <span class="title__status">{{info.order.status_text}}</span>
      </div>
      <div class="my__top-item" v-for="item in info.order_item" :key="item.id">
        <img class="item__img"
             :src="item.image_urls"/>
        <div class="item__right">
          <div class="item__right-title">{{item.product_name}}</div>
          <div class="item__right-des">
            {{item.product_material}}
            {{item.product_purity}}
            {{item.material_weight?`${item.material_weight}g`:null}}
            {{item.product_skn}}{{item.product_technology}}
          </div>
        </div>
        <div class="item__number">
          x {{item.nums}}
        </div>

      </div>
      <div class="my__top-date one">
        <span v-if="info.order.createtime">下单日期：{{moment(info.order.createtime*1000).format("YYYY-MM-DD")}}</span>
        <span v-if="info.order.checktime">审核日期：{{moment(info.order.checktime*1000).format("YYYY-MM-DD")}}</span>
      </div>
      <div class="my__top-date">
        <span v-if="info.order.sendtime">发货日期：{{moment(info.order.sendtime*1000).format("YYYY-MM-DD")}}</span>
        <span v-if="info.order.endtime">完成日期：{{moment(info.order.endtime*1000).format("YYYY-MM-DD")}}</span>
      </div>
    </div>
    <div class="my__bottom" v-if="info.order.status==3">
      <span>货品合计：{{info.order.nums}}件</span>
      <div class="my__bottom-btn" @click="confim">确认收货</div>
    </div>
    <div class="my__bottom" v-if="info.order.status==1">
      <span>货品合计：{{info.order.nums}}件</span>
      <div class="my__bottom-btn" @click="dele">删除</div>
    </div>
  </div>
</template>

<script setup>
import NavBar from "@/components/NavBar/index.vue"
import {Toast,} from "vant"
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {getOrderDetail, orderConfim,orderDele} from "../../../api/index.js";
import moment from "moment";

const route = useRoute();
const router = useRouter();
const info = ref({
  order:{}
})
const dele=async ()=>{
  const res=await orderDele({
    id:route.params.id
  })
  Toast(res.msg)
  if(res.code==1){
    router.back();
  }
}
const  confim=async ()=>{
  const res=await orderConfim({
    id:route.params.id
  })
  Toast(res.msg)
  if(res.code==1){
    router.back();
  }

}
onMounted(async () => {
  getOrderDetail({
    id: route.params.id
  }).then(res => {
    info.value = res.data
  })
})
</script>

<style lang="less" scoped>
.my {
  &__top {
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.14);
    padding: 14px;

    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
    margin-bottom: 20px;
      .item {
        &__img {
          width: 78px;
          height: 78px;
          object-fit: cover;
        }

        &__number {
          font-size: 13px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #666666;
        }

        &__right {
          flex:1;
          display: flex;
          margin-left: 9px;
          height: 78px;
          flex-direction: column;
          justify-content: space-between;

          &-title {
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
          }

          &-des {
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
          }
        }
      }
    }

    &-date {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9B9B9B;
    }

    &-title {
      display: flex;
      justify-content: space-between;
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      margin-bottom: 30px;
      color: #333333;

      .title {
        &__status {
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #1B76FF;
        }
      }
    }
  }

  &__bottom {
    display: flex;
    position: fixed;
    bottom: 0;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.14);
    left: 0;
    right: 0;
    font-size: 14px;
    align-items: center;
    padding: 15px;
    justify-content: space-between;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;

    &-btn {
      width: 99px;
      height: 35px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 35px;
      text-align: center;
      background: linear-gradient(90deg, #93E33A 0%, #5AC21B 100%);
      border-radius: 19px;
    }
  }
}

.one {
  margin-top: 30px;
}
</style>
